<template>
  <div class="page has-headbar page-social-publish">
    <van-nav-bar
      fixed
      :z-index="100"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
        <div class="right-icon" @click="publish" slot="right">发表</div>
    </van-nav-bar>
    <div class="page-box">
      <van-field
        v-model="content"
        class="content"
        type="textarea"
        placeholder="你想说的......"
        rows="5"
        autosize
      />
      <div class="images-box">
        <div v-for="(item, index) in images" :key="index" class="image-item" :style="{backgroundImage:`url(${item.img})`}">
          <div class="inner" @click="deleteImage(index)">
             <van-icon class="delete-icon" color="#fff" size="30px" name="close" />
          </div>
        </div>
        <van-uploader v-if="images.length<6" name="image"  class="choose-image" :after-read="onRead" accept="image/*">
           <img src="@/assets/images/social/choose.png" alt="选择">
        </van-uploader>
      </div>
      <div @click="showMap" class="location">
        <span class="icon icon-location"></span> {{address||'您的位置'}}
      </div>
    </div>
    <iframe  :class="show?'':'hide'"  id="iframe"  :src="map" frameborder="0"></iframe>
  </div>
</template>

<script>
import { Field, Uploader, Popup } from 'vant'
import { API_ADD_TOPICS, API_UPLOAD_TOPICS_IMAGE } from '@/service/social'
import { AMAP_KEY } from '@/libs/config'
export default {
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup
  },
  data () {
    return {
      content: '',
      show: false,
      address: '',
      position: [],
      images: []
    }
  },
  watch: {
    goeLocation (newValue) {
      this.address = this.address || newValue
      this.position = this.position.length || [this.$store.getters.getUserPosition.lng, this.$store.getters.getUserPosition.lat]
    }
  },
  created () {
    // this.address = this.$store.state.user.geoAddress
  },
  computed: {
    map () {
      let lng = this.$store.getters.getUserPosition.lng
      let lat = this.$store.getters.getUserPosition.lat
      return 'https://m.amap.com/picker/?zoom=15&center=' + lng + ',' + lat + '&radius=1000&total=20&key=' + AMAP_KEY
    },
    goeLocation () {
      return this.$store.state.user.geoAddress
    }
  },
  mounted () {
    var that = this
    var iframe = document.getElementById('iframe').contentWindow
    document.getElementById('iframe').onload = function () {
      iframe.postMessage('hello', 'https://m.amap.com/picker/')
    }
    window.addEventListener('message', function (e) {
      // console.log(e.data.location)
      if (!e.data.location) return
      let position = e.data.location.split(',')
      that.position = position
      that.address = e.data.name
      that.show = false
    }, false)
  },
  methods: {
    publish () {
      let reqData = {
        content: this.content,
        locationLat: this.position[1] || this.$store.getters.getUserPosition.lat,
        locationLong: this.position[0] || this.$store.getters.getUserPosition.lng,
        position: this.address || this.$store.getters.getUserPosition.address
      }
      var that = this
      API_ADD_TOPICS(this.$store.getters.getUserInfo.userId, reqData).then(resData => {
        that.$toast.loading({
          mask: true,
          message: '正在提交...'
        })
        let topicID = resData.topicId
        let images = this.images
        let functionList = []
        for (let i = 0, len = images.length; i < len; i++) {
          functionList.push(API_UPLOAD_TOPICS_IMAGE({ topicId: topicID, imgFile: images[i].file }))
        }
        functionList.reduce(function (cur, next) {
          return cur.then(next)
        }, Promise.resolve()).then(function () {
          that.$toast.clear()
          that.$toast('发表成功')
          that.$router.go(-1)
        })
      })
    },
    showMap () {
      this.show = true
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {},
    onRead (file) {
      this.images.push({
        img: file.content,
        file: file.file
      })
      // console.log(this.images)
    },
    deleteImage (index) {
      this.images.splice(index, 1)
    }
  }
}

</script>

<style lang="less">
.page-social-publish{
  @imagePath: '../../assets/images/social';
  .page-box{
    padding: 0 15px;
  }
  .icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    vertical-align: top;
    &-location {
      width: 27/2px;
      height: 35/2px;
      background-image: url("@{imagePath}/icon_location.png");
    }
  }
  .van-cell:not(:last-child)::after{
    border-width: 0;
  }
  .right-icon{
    color: #3393FF;
  }
  .images-box{
    overflow: hidden;
  }
 #iframe{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height:100vh;
   background-color: #fff;
   z-index: 999999;
 }
  .hide{
    display: none;
  }
  .content{
    padding:0;
    padding-top: 10px;
    font-size: 15px;
  }
  .image-item{
    float: left;
    margin-bottom: 10px;
    width: 207/2px;
    height: 207/2px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-right: 17/2px;
    .inner{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
  .choose-image{
    float: left;
     width: 207/2px;
    height: 207/2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    img{
      width: 67/2px;
      height: 67/2px;
    }
  }
  .location{
    font-size: 15px;
    color: #747474;
    line-height: 35/2px;
    margin-top: 55px;
    .icon-location{
      margin-right: 9px;
    }
  }
}
</style>
